<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>社区</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/milligram.min.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/fonts.style.css}" type="text/css" />
    <link rel="stylesheet" th:href="@{/css/style.css}" type="text/css" />
    <script th:src="@{/js/jquery-3.4.1.js}"></script>
    <script th:src="@{/js/jQueryCode.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <!--<link rel="stylesheet" href="../static/css/bootstrap.min.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="../static/css/milligram.min.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="../static/css/fonts.style.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="../static/css/style.css" type="text/css" />-->


    <!--<script src="../static/js/jquery-3.4.1.js"></script>-->
    <!--<script src="../static/js/jQueryCode.js"></script>-->
    <!--<script src="../static/js/bootstrap.min.js"></script>-->

</head>
<body>
<div class="top-nav animation-bg-color-skyblue">
    <div class="logo">
        <a href="#"><img th:src="@{/img/logo.png}" /></a>
    </div>
    <div class="account-check fr">
        <div class="before-login">
            <a class="a-btn animation" href="/user/login">
                <span class="icon-enter"></span>登录
            </a>
            <a class="a-btn animation" href="/user/register">
                <span class="icon-user-plus"></span>注册
            </a>
        </div>
        <div class="after-login hide">
            <!--<a class="a-btn animation fr" href="#">-->
            <!--<span class="icon-exit"></span>退出-->
            <!--</a>-->
            <h5 class="fr">欢迎登陆:13049148938</h5>
        </div>
    </div>

    <div class="s-side animation-bg-color-skyblue">
        <ul>
            <!--这部分是导航栏信息。-->
            <li class="s-firstItem first">
                <a href="/user/index">
                    <i class="fa fa-home"></i>
                    <span>首页</span>
                </a>
            </li>
            <!--查找-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>查找</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toFindEval">
                            查找医生&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>
            <!--预约挂号-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>预约挂号</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/reservation/toReserve">
                            预约&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                </ul>
            </li>

            <!--社区-->
            <li class="first">
                <div class="d-firstNav s-firstNav">
                    <i class="fa fa-bars"></i>
                    <span>社区</span>
                    <i class="fa fa-caret-right fr" ></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>文章</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toSendArticle">
                                    发表文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/community/showArticle">
                                    浏览文章&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>帖子</span>
                            <i class="fa fa-caret-right fr "></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/community/toCommunity">
                                    浏览帖子&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <!--个人中心-->
            <li class="first">
                <div class="d-firstNav s-firstNav clearfix">
                    <i class="fa fa-bars"></i>
                    <span>个人中心</span>
                    <i class="fa fa-caret-right fr"></i>
                </div>
                <ul class="d-firstDrop s-firstDrop">
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>个人资料</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/user/userInfo">
                                    个人信息&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/password">
                                    修改密码&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/user/verify">
                                    实名认证&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="d-secondNav s-secondNav">
                            <i class="fa fa-minus-square-o"></i>
                            <span>钱包</span>
                            <i class="fa fa-caret-right fr"></i>
                        </div>
                        <ul class="d-secondDrop s-secondDrop">
                            <li class="s-thirdItem">
                                <a href="/reservation/toWallet">
                                    我的钱包&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toRecharge">
                                    充值&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                            <li class="s-thirdItem">
                                <a href="/reservation/toBill">
                                    我的账单&nbsp;<span class="icon-cheveron-right"></span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/community/toCollection">
                            我的收藏&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>
                    <li class="s-secondItem">
                        <i class="fa fa-minus-square-o"></i>
                        <a href="/evaluate/toMyEvaluate">
                            我的评价&nbsp;<span class="icon-cheveron-right"></span>
                        </a>
                    </li>

                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="layout">
    <div class="container">
        <h3>社区</h3>

        <hr class="divider"><!-- 分界线 -->

        <!--搜索框 start-->
        <div class="row search">
            <form class="search-form"
                  th:action="@{/community/findTopicByTitle}" method="post">
                <div class="row box-holder">
                    <input class="col-10 search-box" type="text" name="title"
                           placeholder="请输入查询标题"/>
                    <button class="col-2 search-btn d-flex align-items-center animation" type="submit">
                        <div class="content">
                            <span class="icon-search"></span>搜索
                        </div>
                    </button>
                </div>
            </form>
        </div>
        <!--搜索框 end-->

        <hr class="divider"><!-- 分界线 -->

        <!--发表帖子 start-->
        <div class="row post">
            <h4 class="col-12">发表新帖</h4>
            <form class="col-12 post-form" id="topicForm">
                <div class="box-holder">
                    <!--标题-->
                    <input id="title" class="post-box-title" name="title" type="text"
                           placeholder="请填写标题" />
                    <!--内容-->
                    <i id="errorTitle"></i>
                    <script type="text/javascript">
                        $(function(){
                            /**
                             * textarea 限制输入字数
                             * @param string str 类名或ID
                             * @param number num 限制输入的字数
                             */
                            function limitImport(str,num){
                                $(document).on("input propertychange",str,function(){
                                    var self = $(this);
                                    var content = self.val();
                                    if (content.length > num){
                                        self.val(content.substring(0,num));
                                    }
                                    self.siblings("#trr").text("字数上限："+(200-self.val().length)+"/"+num);
                                });
                            }
                            //限制字数为：
                            limitImport("#content",200);
                        })
                    </script>
                    <!--内容-->
                    <textarea id="content" class="post-box-content" name="content"></textarea>
                    <i id="errorContent"></i>
                    <span id="trr">字数上限：200/200</span>
                    <button class="post-btn animation" type="button" id="sendTopic">
                        <span class="icon-upload2"></span>发表
                    </button>
                </div>
            </form>
        </div>
        <!--发表帖子 end-->

        <hr class="divider"><!-- 分界线 -->

        <!--帖子 start-->
        <div class="row topic">
            <h4 class="col-12">帖子</h4>
            <div class="col-12" th:each="topic : ${pageInfo.getContent()}">
                <a th:href="@{/community/toTopic/}+${topic.id}" target="_blank">
                    <div class="topic-box animation">
                        <span class="topic-title animation"><h5>[[${topic.title}]]</h5></span>
                        <span class="topic-content">[[${topic.content}]]</span>
                        <span class="topic-time"><small>[[${topic.time}]]</small></span>

                        <div class="clear-fix"></div>
                    </div>
                </a>
                <div th:if="${topic.uid} eq ${uid}">
                    <button type="button" id="deleteTopic">删除帖子</button>
                </div>
                <input type="hidden" id="tid" th:value="${topic.id}">

            </div>
        </div>
        <!--帖子 end-->

        <!--页码 start-->
        <div class="pagination-box">
            <!--页码-->
            <a class="a-btn animation" th:href="@{/community/toCommunity}">首页</a>
            <a class="a-btn animation" th:href="@{/community/toCommunity(pn = ${pageInfo.hasPrevious()} ? ${pageInfo.getNumber() } - 1 : 0)}">上一页</a>
            <div class="page-number">
                <th:block th:each="i : ${#numbers.sequence(1,pageInfo.totalPages)}">
                    <a class="a-btn animation" th:href="@{/community/toCommunity(pn = ${i}-1)}">
                        <th:block th:text="${i}"></th:block>
                    </a>
                </th:block>
            </div>
            <a class="a-btn animation" th:href="@{/community/toCommunity(pn = ${pageInfo.hasNext()} ? ${pageInfo.getNumber()} + 1 : ${pageInfo.totalPages}-1)}">下一页</a>
            <a class="a-btn animation" th:href="@{/community/toCommunity(pn = ${pageInfo.totalPages}-1)}">尾页</a>
        </div>
        <div class="page-msg">
            <!--页码信息-->
            <span>当前第<span th:text="${pageInfo.getNumber()+1}"></span>页</span>
            <span>总共<span th:text="${pageInfo.totalPages}"></span>页</span>
            <span>共<span th:text="${pageInfo.totalElements}"></span>条记录</span>
        </div>

        <!--页码 end-->
        <!--<p>当前<span th:text="${pageInfo.getNumber()+1}"></span>页,-->
        <!--总<span th:text="${pageInfo.totalPages}"></span>页-->
        <!--共<span th:text="${pageInfo.totalElements}"></span>条记录-->
        <!--<a th:href="@{/community/toCommunity}">首页</a>-->
        <!--<a th:href="@{/community/toCommunity(pn = ${pageInfo.hasPrevious()} ? ${pageInfo.getNumber() } - 1 : 0)}">上一页</a>-->
        <!--<th:block th:each="i : ${#numbers.sequence(1,pageInfo.totalPages)}">-->
        <!--<a th:href="@{/community/toCommunity(pn = ${i}-1)}">-->
        <!--<th:block th:text="${i}"></th:block>-->
        <!--</a>-->
        <!--</th:block>-->
        <!--<a th:href="@{/community/toCommunity(pn = ${pageInfo.hasNext()} ? ${pageInfo.getNumber()} + 1 : ${pageInfo.totalPages}-1)}">下一页</a>-->
        <!--<a th:href="@{/community/toCommunity(pn = ${pageInfo.totalPages}-1)}">尾页</a></p>-->
    </div>
    <script type="text/javascript">
        $("#title").blur(function () {
            let title = $("#title").val();
            if (title == '' || title == null){
                $("#title").css('borderColor','red'); //添加css样式
                $("#errorTitle").html("标题不能为空");
                $("#errorTitle").css('color','red');
            }else{
                $("#title").css('borderColor','green'); //取消css样式
                $("#errorTitle").html("");
            }
        });

        $("textarea").blur(function () {
            let content = $("#content").val();
            if (content == '' || content == null){
                $("#content").css('borderColor','red'); //添加css样式
                $("#errorContent").html("内容不能为空");
                $("#errorContent").css('color','red');
            }else {
                $("#content").css('borderColor','green'); //取消css样式
                $("#errorContent").html("");
            }
        });

        $("#deleteTopic").click(function () {
            var tid = $("#tid").val();
            location.href = "/community/deleteTopic/"+tid;
        });

        $("#sendTopic").click(function () {
            let title = $("#title").val();
            let content = $("#content").val();
            if (title == ''){
                $("#errorTitle").html("标题不能为空");
                $("#errorTitle").css('color','red');
            } else if (content == '') {
                $("#errorTitle").html("");
                $("#errorContent").html("内容不能为空");
                $("#errorContent").css('color','red');
            } else {
                $("#errorContent").html("");
                location.href="/community/sendTopic?title="+title+"&content="+content;
            }

        });

        // $(function () {
        //     let title = $("#title").val();
        //     let content = $("#content").val();
        //     $("#title").change(function () {
        //         if (title != '' && title != null && content != '' && title != null ){
        //             $('#sendTopic').attr("disabled",false);
        //         }
        //     });
        //     $("#content").change(function () {
        //         if (title != '' && title != null && content != '' && title != null ){
        //             $('#sendTopic').attr("disabled",false);
        //         }
        //     });
        //
        //     if (title == '' || title == null || content == '' || content == null){
        //         $('#sendTopic').attr("disabled",true);
        //     }else {
        //         $('#sendTopic').attr("disabled",false);
        //     }
        // });


    </script>
    <div class="bubbles">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>
</div>

</body>
</html>